<template>
  <view class="more-invoice-info">
    <view class="mii-body">
      <u--form
        ref="formRef"
        label-width="80px"
        error-type="toast"
        :model="formData"
        :label-style="{ fontSize: '28rpx', color: '#646464' }"
      >
        <view class="form-block">
          <view class="title">公司信息（非必填）</view>
          <!-- 单位地址 -->
          <u-form-item label="注册地址" prop="address">
            <u--input v-model="formData.address" border="bottom" placeholder="选填"></u--input>
          </u-form-item>
          <!-- 公司电话 -->
          <u-form-item label="注册电话" prop="telephone">
            <u--input v-model="formData.telephone" border="bottom" placeholder="选填"></u--input>
          </u-form-item>
        </view>
        
        <view class="form-block">
          <view class="title">开户行信息（非必填）</view>
          <!-- 开户银行 -->
          <u-form-item label="开户银行" prop="bankName">
            <u--input v-model="formData.bankName" border="bottom" placeholder="选填"></u--input>
          </u-form-item>
          <!-- 开户账号 -->
          <u-form-item label="银行账号" prop="bankNo">
            <u--input v-model="formData.bankNo" type="number" border="bottom" placeholder="选填"></u--input>
          </u-form-item>
        </view>
        
        <view class="form-block">
          <view class="title">备注（非必填）</view>
          <!-- 备注 -->
          <u-form-item prop="remarks">
            <u--textarea
              v-model="formData.remarks"
              placeholder="请按公司报销要求填写~"
              height="80px"
              maxlength="50"
              border="none"
              count
            ></u--textarea>
          </u-form-item>
        </view>
      </u--form>
    </view>
    
    <view class="mii-button">
      <u-button type="primary" text="确认信息" @click="onConfirm"></u-button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        formData: {
          address: '', // 单位地址
          telephone: '', // 公司电话
          bankName: '', // 开户银行
          bankNo: '', // 开户账号
          remarks: '', // 备注
        },
        
        // 校验规则
        rules: {
          telephone: [
            {
              // pattern: /0\d{2,3}-\d{7,8}/g,
              pattern: /^\d(\d|-)+\d$/g,
              message: '公司电话格式不正确'
            }
          ]
        },
      }
    },
    methods: {
      async onConfirm() {
        // 格式校验
        await this.$refs.formRef.validate()
        
        const eventChannel = this.getOpenerEventChannel()
        uni.navigateBack({
          success: () => {
            const data = { ...this.formData }
            eventChannel.emit('submitMoreInfo', data)
          }
        })
      },
      
      setValue(data) {
        Object.keys(this.formData).forEach(key => {
          if (data[key]) {
            this.formData[key] = data[key]
          }
        })
      }
    },
    onReady() {
      this.$refs.formRef.setRules(this.rules)
    },
    onLoad() {
      const eventChannel = this.getOpenerEventChannel()
      eventChannel.on('setMoreInvoiceInfo', this.setValue)
    }
  }
</script>

<style scoped lang="scss">
.more-invoice-info {
  /deep/ .u-form-item__body {
    padding: 4px 0 !important;
  }
  
  .mii-body {
    height: calc(100vh - 32rpx - 40px - env(safe-area-inset-bottom));
    font-size: 28rpx;
    overflow-y: auto;
  }
  .form-block {
    padding: 32rpx;
    margin: 20rpx 0 0;
    background-color: #fff;
    .title {
      line-height: 1.5;
      margin-bottom: 10rpx;
    }
    /deep/ .u-textarea__field {
      font-size: 28rpx;
      line-height: 1.5;
    }
  }
  .mii-button {
    padding: 32rpx 32rpx env(safe-area-inset-bottom);
    background-color: #fff;
    display: flex;
    flex-direction: row;
    gap: 10rpx;
  }
}
</style>
